<template>
  <div class="container">
    <div class="headerTitle"></div>
    <div class="timeBox">
      <div class="left">{{ timeNow }}</div>
      <div class="right">
        <div class="rightWeek">{{ timeWeek }}</div>
        <div class="rightTime">{{ timeDate }}</div>
      </div>
    </div>
    <div class="sameBox left1">
      <div class="title">井盖监测</div>
      <div class="left1Box">
        <div class="leftJInGai">
          <div class="name">管道仓井盖</div>
          <img
            class="JinGaiImg"
            src="@/assets/井盖正常.png"
            alt=""
            v-if="JInGaiObject.wellStatus == '0'"
          />
          <img class="JinGaiImg" src="@/assets/井盖异常.png" alt="" v-else />
        </div>
        <div class="rightJInGai">
          <div class="sameColum JinGaiStatus">
            <div>井盖状态:</div>
            <div style="display: flex; align-items: center">
              <div v-if="JInGaiObject.wellStatus == '0'">
                <img
                  class="statusImg"
                  src="@/assets/矩形 1068.png"
                  alt=""
                />正常
              </div>
              <div v-else>
                <img
                  class="statusImg"
                  src="@/assets/矩形 1068 拷贝.png"
                  alt=""
                />超标
              </div>
            </div>
          </div>
          <div class="sameColum">
            监测时间:
            <span style="margin-left: 5px">{{ JInGaiObject.wellTime }}</span>
          </div>
          <div class="sameColum">
            历史数据:<span class="blueColor" @click="openJinGai(1)"
              >查看 >
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="left2">
      <div class="title">电子锁监测</div>
      <div class="titleContent">
        <div>电子锁状态：</div>
        <div class="greenColor">关闭</div>
        <div class="shebeiStatus">设备正常</div>
      </div>
      <div class="dianzisuoList">
        <div class="dianzisuoTitle">
          <div class="zuoyepiao">相关作业票号</div>
          <div class="shenqingren">申请人</div>
          <div class="shenqingren">申请时间</div>
        </div>

        <div class="dianziItemList">
          <div class="dianziItem">
            <div class="zuoyepiao">相关作业票号</div>
            <div class="shenqingren">申请人</div>
            <div class="shenqingren">申请时间</div>
          </div>
        </div>
      </div>
    </div>
    <div class="left2 left3">
      <div class="title">报警记录</div>
      <div class="renyuanBaojin">
        <div class="renyuanBaojinTitle">人员报警</div>
        <div class="renyuanBaojinName">
          <span class="renyuanColor">68 </span>次
        </div>
      </div>
      <div class="keran">
        <div class="keranTitle">人员报警</div>
        <div class="keranName"><span class="keranColor">68 </span>次</div>
      </div>
      <div class="selectBaoJin">
        <div
          class="ryBaoJin"
          @click="chooseBaoJin(1)"
          :class="{ selectOne: baoJinSelect == 1 }"
        >
          人员进入报警
        </div>
        <div
          class="ryBaoJin"
          @click="chooseBaoJin(2)"
          :class="{ selectOne: baoJinSelect == 2 }"
        >
          可燃气体报警
        </div>
      </div>
      <div class="dianzisuoList dianzisuoList2">
        <div class="dianzisuoTitle">
          <div class="zuoyepiao">相关作业票号</div>
          <div class="shenqingren">申请人</div>
          <div class="shenqingren">申请时间</div>
        </div>

        <div class="dianziItemList">
          <div class="dianziItem">
            <div class="zuoyepiao">相关作业票号</div>
            <div class="shenqingren">申请人</div>
            <div class="shenqingren">申请时间</div>
          </div>
        </div>
      </div>
    </div>

    <div class="sameBox right1">
      <div class="title">气体监测</div>
      <div class="left1Box">
        <div class="leftJInGai">
          <div class="name">可燃气体</div>
          <img
            class="JinGaiImg"
            src="@/assets/气体正常.png"
            alt=""
            v-if="gasObject.gasStatus == 0"
          />
          <img class="JinGaiImg" src="@/assets/气体异常.png" alt="" v-else />
        </div>
        <div class="rightJInGai">
          <div class="sameColum JinGaiStatus">
            <div>气体状态:</div>
            <div style="display: flex; align-items: center">
              <div v-if="gasObject.gasStatus == 0">
                <img
                  class="statusImg"
                  src="@/assets/矩形 1068.png"
                  alt=""
                />正常
              </div>
              <div v-else>
                <img
                  class="statusImg"
                  src="@/assets/矩形 1068 拷贝.png"
                  alt=""
                />超标
              </div>
            </div>
          </div>
          <div class="sameColum">
            监测时间:
            <span style="margin-left: 5px">{{ gasObject.gasTime }}</span>
          </div>
          <div class="sameColum">
            历史数据:<span class="blueColor" @click="openJinGai(2)"
              >查看 >
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="right2">
      <div class="title">摄像头监控</div>
      <div class="jiankongTotal">
        <div>监控总数</div>
        <div class="">3</div>
      </div>
      <div class="jiankongTotal2">
        <div>在线数</div>
        <div style="color: #31ffd6">2</div>
      </div>
      <div class="jiankongTotal3">
        <div>离线数</div>
        <div style="color: #ff7247">1</div>
      </div>
    </div>
    <div class="left2 left3 right3">
      <div class="title">作业票数据</div>
      <div class="zuoyepiaoTotal">
        <div class="zuoyepiaoTotalNum">{{ homeWorkData.jobTotal }}</div>
        <div>作业票总数</div>
      </div>
      <div class="zuoyepiaodaishenhe">
        <div class="zuoyepiaoTotalNum dasiehnheColor">
          {{ homeWorkData.jobStatusZero }}
        </div>
        <div>待审核</div>
      </div>
      <div class="zuoyepiaoyitongguo">
        <div class="zuoyepiaoTotalNum tgColor">
          {{ homeWorkData.jobStatusOne }}
        </div>
        <div>已通过</div>
      </div>
      <div class="dianzisuoList dianzisuoList2">
        <div class="dianzisuoTitle">
          <div class="zuoyepiao">作业票编号</div>
          <div class="shenqingren">发起时间</div>
          <div class="shenqingren2">状态</div>
          <div class="shenqingren3">发起人</div>
        </div>

        <div class="dianziItemList">
          <div
            class="dianziItem"
            v-for="item in homeWorkData.jobTicketDataVOList"
            :key="item.jobTicketId"
          >
            <div class="zuoyepiao">{{ item.jobTicketId }}</div>
            <div class="shenqingren">{{ item.createdTime.slice(5, 16) }}</div>
            <div v-if="item.jobStatus == 0" class="shenqingren2">
              {{ item.jobStatusName }}
            </div>
            <div v-if="item.jobStatus == 2" class="shenqingren2 yellowC">
              {{ item.jobStatusName }}
            </div>
            <div v-if="item.jobStatus == 1" class="shenqingren2 greenC">
              {{ item.jobStatusName }}
            </div>
            <div class="shenqingren3">{{ item.jobSubmitter }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <div class="JinGaiDialog" v-if="jinGaiVisible">
      <div class="dialogTitle">
        <div>井盖数据</div>
        <div>
          <img
            class="closeImg"
            src="@/assets/关  闭.png"
            alt=""
            @click="closeDialog"
          />
        </div>
      </div>
      <div class="dialogForm">
        <el-date-picker
          class="custom-time-picker"
          v-model="wellSearch.time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <el-select
          class="selectBox"
          v-model="wellSearch.status"
          placeholder="请选择状态"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="searchWellData">查询</el-button>
        <el-button class="resetBtn" @click="resetWellData">重置</el-button>
      </div>
      <div class="formBox">
        <el-table
          :data="wellData"
          style="width: 100%"
          :header-row-style="{
            backgroundColor: '#20374F',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '36px',
            fontSize: '18px',
            textAlign: 'center',
          }"
          :header-cell-style="{
            backgroundColor: '#20374F',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '36px',
            padding: '7px 0',
            textAlign: 'center',
          }"
          :row-style="{
            backgroundColor: 'transparent',
            color: '#ffffff',
            borderBottom: '1px solid #022627',
            height: '36px',
            fontSize: '18px',
            textAlign: 'center',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '36px',
            padding: '7px 0',
            textAlign: 'center',
          }"
        >
          <el-table-column prop="id" label="设备编号" width="120">
          </el-table-column>
          <el-table-column prop="wellDeviceStatus" label="设备状态">
            <template slot-scope="scope">
              <div
                :class="{
                  greenC: scope.row.wellDeviceStatus == 0,
                  redC: scope.row.wellDeviceStatus == 1,
                }"
              >
                {{ scope.row.wellDeviceStatus == 0 ? '正常' : '异常' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="wellData" label="监测数据"> </el-table-column>
          <el-table-column prop="wellTime" label="监测时间"> </el-table-column>
          <el-table-column prop="wellStatus" label="监测状态">
            <template slot-scope="scope">
              <div
                :class="{
                  greenC: scope.row.wellStatus == 0,
                  redC: scope.row.wellStatus == 1,
                }"
              >
                {{ scope.row.wellStatus == 0 ? '正常' : '异常' }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageBox">
        <el-pagination
          :background="false"
          layout="prev, pager, next"
          :total="wellTotal"
          @current-change="currentShebeiPage"
        >
        </el-pagination>
      </div>
    </div>

    <div class="JinGaiDialog" v-if="gasVisible">
      <div class="dialogTitle">
        <div>{{ dialogTitle }}</div>
        <div>
          <img
            class="closeImg"
            src="@/assets/关  闭.png"
            alt=""
            @click="closeDialogGas"
          />
        </div>
      </div>
      <div class="dialogForm">
        <el-date-picker
          class="custom-time-picker"
          v-model="gasSearch.time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <el-select
          class="selectBox"
          v-model="gasSearch.status"
          placeholder="请选择状态"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="searchWellDataGas">查询</el-button>
        <el-button class="resetBtn" @click="resetWellDataGas">重置</el-button>
      </div>
      <div class="formBox">
        <el-table
          :data="gasData"
          style="width: 100%"
          :header-row-style="{
            backgroundColor: '#20374F',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '36px',
            fontSize: '18px',
            textAlign: 'center',
          }"
          :header-cell-style="{
            backgroundColor: '#20374F',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '36px',
            padding: '7px 0',
            textAlign: 'center',
          }"
          :row-style="{
            backgroundColor: 'transparent',
            color: '#ffffff',
            borderBottom: '1px solid #022627',
            height: '36px',
            fontSize: '18px',
            textAlign: 'center',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '36px',
            padding: '7px 0',
            textAlign: 'center',
          }"
        >
          <el-table-column prop="id" label="设备编号" width="120">
          </el-table-column>
          <el-table-column prop="gasDeviceStatus" label="设备状态">
            <template slot-scope="scope">
              <div
                :class="{
                  greenC: scope.row.gasDeviceStatus == 0,
                  redC: scope.row.gasDeviceStatus == 1,
                }"
              >
                {{ scope.row.gasDeviceStatus == 0 ? '正常' : '异常' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="gasData" label="监测数据"> </el-table-column>
          <el-table-column prop="gasTime" label="监测时间"> </el-table-column>
          <el-table-column prop="gasStatus" label="监测状态">
            <template slot-scope="scope">
              <div
                :class="{
                  greenC: scope.row.gasStatus == 0,
                  redC: scope.row.gasStatus == 1,
                }"
              >
                {{ scope.row.gasStatus == 0 ? '正常' : '异常' }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageBox">
        <el-pagination
          :background="false"
          layout="prev, pager, next"
          :total="gasTotal"
          @current-change="currentShebeiPageGas"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 导入中文语言包
import relativeTime from 'dayjs/plugin/relativeTime' // 导入相对时间插件
// 使用插件
dayjs.extend(relativeTime)
dayjs.locale('zh-cn') // 设置语言为中文
import {
  getGasDetectionStatusapi,
  getWellDetectionStatusApi,
  getJobDataApi,
  getWellPageApi,
  getGasPageApi,
  surveillancePointApi,
} from '@/api'

export default {
  name: 'indexPage',
  props: {},
  components: {},
  data() {
    return {
      timeDate: '',
      timeWeek: '',
      timeNow: '',
      baoJinSelect: '1',
      jinGaiVisible: false,
      gasVisible: false,
      gasObject: {},
      JInGaiObject: {},
      homeWorkData: {},
      value1: '',
      options: [
        {
          value: '0',
          label: '正常',
        },

        {
          value: '1',
          label: '超标',
        },
      ],
      value: '',
      wellData: [],
      wellTotal: null,
      wellPageParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: '',
        endTime: '',
      },
      wellSearch: {
        time: '',
        status: '',
      },
      gasData: [],
      gasTotal: null,
      gasPageParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: '',
        endTime: '',
      },
      gasSearch: {
        time: '',
        status: '',
      },
      dialogTitle: '',
    }
  },
  methods: {
    updateTime() {
      const now = dayjs()
      // 获取当天日期，格式化为 YYYY-MM-DD
      this.timeDate = now.format('YYYY-MM-DD')
      // 获取当天星期，格式化为 星期X 的形式
      this.timeWeek = now.format('dddd') // 'dddd' 格式化为星期几的全称
      // 获取当天时间，格式化为 HH:mm:ss
      this.timeNow = now.format('HH:mm:ss')
    },
    chooseBaoJin(type) {
      this.baoJinSelect = type
    },
    openJinGai(e) {
      this.dialogTitle = e == 1 ? '井盖数据' : '气体数据'
      if (e == 1) {
        this.getWellPage()
        this.jinGaiVisible = true
      } else {
        this.getGasPage()
        this.gasVisible = true
      }
    },
    async getGasDetectionStatus() {
      const res = await getGasDetectionStatusapi()
      this.gasObject = res.data
    },
    async getWellDetectionStatus() {
      const res = await getWellDetectionStatusApi()
      this.JInGaiObject = res.data
    },
    async getJobData() {
      const res = await getJobDataApi()
      this.homeWorkData = res.data
    },
    closeDialog() {
      this.resetWellData()
      this.jinGaiVisible = false
    },
    resetWellData() {
      this.wellPageParams = {
        pageNum: 1,
        pageSize: 10,
        startTime: '',
        endTime: '',
      }
      this.wellSearch = {
        time: '',
        status: '',
      }
      this.getWellPage()
    },
    async getWellPage() {
      const res = await getWellPageApi({
        pageNum: this.wellPageParams.pageNum,
        pageSize: this.wellPageParams.pageSize,
        startTime: this.wellSearch.time[0],
        endTime: this.wellSearch.time[1],
        status: this.wellSearch.status,
      })
      this.wellData = res.data.records
      this.wellTotal = res.data.total
    },

    currentShebeiPage(pageNum) {
      this.wellPageParams.pageNum = pageNum
      this.getWellPage()
    },
    searchWellData() {
      this.getWellPage()
    },
    async getGasPage() {
      const res = await getGasPageApi({
        pageNum: this.gasPageParams.pageNum,
        pageSize: this.gasPageParams.pageSize,
        startTime: this.gasSearch.time[0],
        endTime: this.gasSearch.time[1],
        status: this.gasSearch.status,
      })
      this.gasData = res.data.records
      this.gasTotal = res.data.total
    },
    closeDialogGas() {
      this.resetWellDataGas()
      this.gasVisible = false
    },
    resetWellDataGas() {
      this.gasPageParams = {
        pageNum: 1,
        pageSize: 10,
        startTime: '',
        endTime: '',
      }
      this.gasSearch = {
        time: '',
        status: '',
      }
      this.getGasPage()
    },
    currentShebeiPageGas(pageNum) {
      this.gasPageParams.pageNum = pageNum
      this.getGasPage()
    },
    searchWellDataGas() {
      this.getGasPage()
    },
    async surveillancePoint() {
      const res = await surveillancePointApi()
      console.log(res)
    },
  },
  created() {
    this.updateTime()
    this.getGasDetectionStatus()
    this.getWellDetectionStatus()
    this.getJobData()
    this.surveillancePoint()
    setInterval(() => {
      this.updateTime()
    }, 1000)
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  width: 1920px;
  height: 1080px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  position: absolute;
  color: #f6faff;
  // background-image: url('@/assets/allPic/中国地图3@1x.png');
  background-image: url('@/assets/图层 562.png');
  .sameBox {
    background-image: url('@/assets/左1.png');
    width: 498px;
    height: 274px;
    .sameColum {
      background-image: url('@/assets/矩形 1 拷贝.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 240px;
      height: 40px;
      line-height: 40px;
      padding-left: 16px;
      color: #afb3bb;
      margin-bottom: 24px;
    }
    .JinGaiStatus {
      display: flex;
      align-items: center;
      .statusImg {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-left: 6px;
        padding-top: 1px;
      }
    }
    .blueColor {
      color: #55adff;
      margin-left: 20px;
      cursor: pointer;
    }
    .title {
      padding-left: 53px;
      color: #ffffff;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 2px; /* 设置文字间距为2像素 */
      // z-index: -1;
    }
    .left1Box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-top: 30px;
      .leftJInGai {
        font-weight: bold;
        text-align: center;
        .JinGaiImg {
          width: 151px;
          height: 137px;
        }
      }
    }
  }
  .left1 {
    position: absolute;
    left: 25px;
    top: 109px;
  }
  .right1 {
    position: absolute;
    right: 25px;
    top: 109px;
  }

  .left2 {
    background-image: url('@/assets/左2.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 498px;
    height: 274px;
    position: absolute;
    left: 25px;
    top: 404px;
    .title {
      padding-left: 53px;
      color: #ffffff;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 2px; /* 设置文字间距为2像素 */
      // z-index: -1;
    }
    .titleContent {
      display: flex;
      align-items: center;
      position: absolute;
      left: 143px;
      top: 65px;
      .greenColor {
        margin-left: 20px;
        color: #ffee33;
      }
      .shebeiStatus {
        margin-left: 80px;
        padding: 5px 4px;
        width: 64px;
        height: 32px;
        line-height: 32px;
        background: #296bcd;
        border-radius: 4px;
        color: #ffffff;
      }
    }
    .dianzisuoList {
      width: 432px;
      position: absolute;
      left: 39px;
      top: 134px;
      .dianzisuoTitle {
        height: 28px;
        line-height: 28px;
        background-color: rgba(48, 65, 90, 0.5); /* 透明度为50% */
        display: flex;
        justify-content: space-around;
      }
      .dianziItemList {
        height: 100px;
        overflow-y: scroll;
      }
      .dianziItem {
        display: flex;
        color: #a6b8cf;
        height: 28px;
        line-height: 28px;
        background-color: rgba(48, 65, 90, 0.2); /* 透明度为50% */
        margin: 0 1px;
      }
      .zuoyepiao {
        width: 44%;
        text-align: center;
      }
      .shenqingren {
        width: 30%;
        text-align: center;
      }
      .shenqingren2 {
        width: 20%;
        text-align: center;
      }
      .shenqingren3 {
        width: 15%;
        text-align: center;
      }
      .yellowC {
        color: #ffde52;
      }
      .greenC {
        color: #30fbdd;
      }
    }
    /* 隐藏滚动条 */
    .dianziItemList::-webkit-scrollbar {
      display: none; /* 隐藏滚动条 */
    }
  }
  .left3 {
    background-image: url('@/assets/左3.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 498px;
    height: 274px;
    position: absolute;
    left: 25px;
    top: 723px;
    .renyuanBaojin {
      position: absolute;
      left: 126px;
      top: 58px;
      .renyuanBaojinName {
        font-weight: bold;
        color: #59d2ff;
      }
      .renyuanColor {
        font-size: 24px;
      }
    }
    .keran {
      position: absolute;
      right: 59px;
      top: 58px;
      .keranName {
        font-weight: bold;
        color: #ffbf35;
      }
      .keranColor {
        font-size: 24px;
      }
    }
    .selectBaoJin {
      position: absolute;
      left: 39px;
      top: 134px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 182px;
      height: 28px;
      text-align: center;
      background: rgba(24, 40, 58, 0.7);
      border-radius: 4px;
      border: 1px solid #243851;
      color: #b5cfee;
      .ryBaoJin {
        width: 88px;
        line-height: 24px;
        height: 24px;
        // background: #0d70c3;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
      }
      .selectOne {
        background: #0d70c3;
        color: #ffffff;
      }
    }
    .dianzisuoList2 {
      position: absolute;
      top: 174px;
    }
  }
  .right2 {
    background-image: url('@/assets/右2.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 498px;
    height: 274px;
    position: absolute;
    top: 404px;
    left: 1385px;
    .title {
      padding-left: 53px;
      color: #ffffff;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 2px; /* 设置文字间距为2像素 */
      // z-index: -1;
    }
    .jiankongTotal {
      position: absolute;
      left: 97px;
      top: 67px;
    }
    .jiankongTotal2 {
      position: absolute;
      left: 258px;
      top: 67px;
    }
    .jiankongTotal3 {
      position: absolute;
      left: 402px;
      top: 67px;
    }
  }
  .right3 {
    background-image: url('@/assets/右3.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 498px;
    height: 274px;
    position: absolute;
    top: 723px;
    left: 1385px;
    .zuoyepiaoTotal {
      position: absolute;
      left: 78px;
      top: 70px;
    }
    .zuoyepiaodaishenhe {
      position: absolute;
      left: 248px;
      top: 70px;
    }
    .zuoyepiaoyitongguo {
      position: absolute;
      left: 400px;
      top: 70px;
    }
    .zuoyepiaoTotalNum {
      font-size: 24px;
      font-weight: bold;
    }
    .dasiehnheColor {
      color: #ffd940;
    }
    .tgColor {
      color: #51ffd4;
    }
  }
}
.headerTitle {
  background-image: url('@/assets/有限空间作业监测平台.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translate(-50%);
  width: 418px;
  height: 64px;
}

.timeBox {
  position: absolute;
  top: 40px;
  left: 40px;
  display: flex;
  align-items: center;
  color: #ffffff;
  .left {
    font-weight: bold;
    font-size: 28px;
    color: #ffffff;
    border-right: 1px solid #9ec5e7;
    padding-right: 30px;
  }
  .right {
    padding-left: 24px;
    .rightTime {
      margin-top: 4px;
      font-size: 10px;
      color: #cdd7e6;
    }
  }
}
.JinGaiDialog {
  width: 1021px;
  height: 640px;
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight: bold;
  transform: translate(-50%, -50%);
  background-image: url('@/assets/形状 21 拷贝 (1).png');
  padding: 39px 32px;
  .dialogTitle {
    color: #fff; /* 深蓝色 */
    font-size: 25px; /* 根据需要调整字体大小 */
    display: flex;
    justify-content: space-between;
    .closeImg {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
  .dialogForm {
    display: flex;
    margin-top: 20px;

    /* 为 .custom-time-picker 类添加的 .el-date-editor 元素设置背景色和边框 */
    .custom-time-picker {
      background: rgba(17, 27, 42, 0.7) !important; /* 设置背景颜色 */
      border: 1px solid #384e70;

      ::v-deep .el-range-input {
        background: rgba(17, 27, 42, 0.7) !important; /* 设置背景颜色 */
      }
    }
    .selectBox {
      width: 200px;
      margin: 0 24px;
      ::v-deep .el-input__inner {
        background: rgba(17, 27, 42, 0.7) !important;
        border-radius: 4px;
        border: 1px solid #384e70;
      }
    }
    .resetBtn {
      background-color: #0e233f;
      color: #fff;
      border: 1px solid #8ea0bd;
    }
  }
  .formBox {
    padding: 26px 0 0;
    .formTitle {
      background-color: #20374f;
      height: 36px;
      line-height: 36px;
      display: flex;
      .titleOne {
        width: 25%;
        text-align: center;
        color: #fff;
      }
    }
    .formItem {
      background-color: transparent;
      border-bottom: 1px solid #334961;
    }
    ::v-deep .el-table,
    .el-table__expanded-cell {
      background-color: transparent !important;
    }
    .greenC {
      color: #30fbdd;
    }
    .redC {
      color: #ff7342;
    }
  }
  .pageBox {
    padding-top: 10px;
    width: 100%;
    text-align: center;
  }
}
</style>
